<template>
	<view class="wallet">
		<app-title text='钱包' :leftShow='false'></app-title>
		<view class="xzzq_box" v-if="updateTypes">
			<view class="xzzq_box_">
				{{dlbtn == ''?'正在下载0%':dlbtn}}
			</view>
		</view>
		<view class="wallet_box">
			<view class="wallet_box_top">
				<!-- <view class="wallet_box_top_mingxi">
					明&nbsp;细
				</view> -->
				<view class="wallet_box_top_row">
					<view class="wallet_box_top_row_col" @click="gotuFun('/pages/Details/Details?type=11')">
						<p>收益余额（元）</p>
						<span>{{res.syye?res.syye:'0.00'}}</span>

						<image class="wallet_box_top_row_col_image" src="@/static/wallet/mingxi.png" mode=""
							v-if="isOpen1" @click="">
						</image>
					</view>
					<view class="wallet_box_top_row_col" @click="gotuFun('/pages/Details/Details?type=1')">
						<p>可用资金（元）</p>
						<span>{{res.credit2?res.credit2:'0.00'}}</span>


						<image class="wallet_box_top_row_col_image" src="@/static/wallet/mingxi.png" mode="" @click=""
							v-if="isOpen2">
						</image>




						<!-- <p @click="gotuFun('/pages/wallet/TopUp/TopUp')"
							style="border: 1rpx solid #fff;width:130rpx;height: 50rpx;border-radius: 50rpx;text-align: center;line-height: 50rpx;">
							充值</p>
						<p @click="showinteraction('暂未开放')"
							style="border: 1rpx solid #fff;width:130rpx;height: 50rpx;border-radius: 50rpx;text-align: center;line-height: 50rpx;">
							提现</p> -->
					</view>
				</view>
				<view class="wallet_box_top_row">
					<view class="wallet_box_top_row_col" style="align-items: flex-end;">
						<p @click="gotuFun('/pages/wallet/TopUp/TopUp')"
							style="border: 1rpx solid #fff;width:180rpx;height: 50rpx;border-radius: 50rpx;text-align: center;line-height: 50rpx;">
							充值
						</p>
					</view>
					<view class="wallet_box_top_row_col">

						<p @click="showinteraction('暂未开放')"
							style="border: 1rpx solid #fff;width:180rpx;height: 50rpx;border-radius: 50rpx;text-align: center;line-height: 50rpx;">
							提现
						</p>



						<!-- <p>收益余额（元）</p>
						<h5>0.00</h5> -->
					</view>
				</view>
			</view>

			<view class="wallet_box_center">
				<view class="wallet_box_center_item">
					<view class="wallet_box_center_item_left" @click="gotuFun('/pages/Details/Details?type=3')">
						<view class="wallet_box_center_item_left_" style="margin-right: 38rpx;">
							<image style="width: 90rpx;" src="@/static/wallet/lvsejifen.png" mode="widthFix">
							</image>
						</view>
						<view class="wallet_box_center_item_left_" style="flex: 1;">
							<p>绿色积分</p>
							<span>{{res.mjf}}</span>

							<image class="wallet_box_center_item_left_image" src="@/static/wallet/mingxi.png" mode=""
								@click="" v-if="isOpen3">
							</image>
						</view>
					</view>
					<view class="wallet_box_center_item_right" @click="showinteraction('待开放')">
						<!-- <view class="wallet_box_center_item_right" @click="gotuFun('/pages/Details/Details?type=2')"> -->
						<view class="wallet_box_center_item_left_" style="margin-right: 38rpx;">
							<image style="width: 90rpx;" src="@/static/wallet/lihe.png" mode="widthFix">
							</image>
						</view>
						<view class="wallet_box_center_item_left_" style="flex: 1;">
							<p>贡献积分</p>
							<span>{{ res.qyjf }}</span>

							<image class="wallet_box_center_item_left_image" src="@/static/wallet/mingxi.png" mode=""
								@click="" v-if="isOpen4">
							</image>
						</view>
					</view>
					<!-- <view class="wallet_box_center_item_position"
						@click="gotuFun('/pages/home/SearchingList/SearchingList?type=15&title=认种沉香树')"> -->
					<view class="wallet_box_center_item_position" @click=" showinteraction('待开放')">
						进入种植
					</view>

				</view>
				<view class="wallet_box_center_item">
					<view class="wallet_box_center_item_left" @click="gotuFun('/pages/Details/Details?type=6')">
						<view class="wallet_box_center_item_left_" style="margin-right: 38rpx;">
							<image style="width: 90rpx;" src="@/static/wallet/hongbao.png" mode="widthFix">
							</image>
						</view>
						<view class="wallet_box_center_item_left_" style="flex: 1;">
							<p>绿色资产</p>
							<span>{{ res.lszc }}</span>

							<image class="wallet_box_center_item_left_image" src="@/static/wallet/mingxi.png" mode=""
								@click="" v-if="isOpen5">
							</image>
						</view>
					</view>
					<view class="wallet_box_center_item_right" @click="gotuFun('/pages/Details/Details?type=13')">
						<view class="wallet_box_center_item_left_" style="margin-right: 38rpx;">
							<image style="width: 90rpx;" src="@/static/wallet/cangliang.png" mode="widthFix">
							</image>
						</view>
						<view class="wallet_box_center_item_left_" style="flex: 1;">
							<p>茶值</p>
							<span>{{res.ymd?res.ymd:'0.00'}}</span>

							<image class="wallet_box_center_item_left_image" src="@/static/wallet/mingxi.png" mode=""
								@click="" v-if="isOpen6">
							</image>
						</view>
					</view>
					<view class="wallet_box_center_item_position" @click="appgotoFun">
						进入数农
					</view>
				</view>
				<view class="wallet_box_center_item">
					<view class="wallet_box_center_item_left" @click="showinteraction('待开放')">
						<!-- <view class="wallet_box_center_item_left" @click="gotuFun('/pages/Details/Details?type=4')"> -->
						<view class="wallet_box_center_item_left_" style="margin-right: 38rpx;">
							<image style="width: 90rpx;" src="@/static/wallet/xiaofeiquan.png" mode="widthFix">
							</image>
						</view>
						<view class="wallet_box_center_item_left_" style="flex: 1;">
							<p>沉香树</p>
							<span>{{ res.djf?res.djf:'0.00' }}</span>

							<image class="wallet_box_center_item_left_image" src="@/static/wallet/mingxi.png" mode=""
								@click="" v-if="isOpen5">
							</image>
						</view>
					</view>
					<view class="wallet_box_center_item_right" @click="gotuFun('/pages/Details/Details?type=12')">
						<view class="wallet_box_center_item_left_" style="margin-right: 38rpx;">
							<image style="width: 90rpx;" src="@/static/wallet/chabei.png" mode="widthFix">
							</image>
						</view>
						<view class="wallet_box_center_item_left_" style="flex: 1;">
							<p>茶贝</p>
							<span>{{res.user_cd?res.user_cd:'0.00'}}</span>

							<image class="wallet_box_center_item_left_image" src="@/static/wallet/mingxi.png" mode=""
								@click="" v-if="isOpen6">
							</image>
						</view>
					</view>
					<!-- <view class="wallet_box_center_item_position" @click="appgotoFun">
						进入数农
					</view> -->
				</view>
				<view class="wallet_box_center_item">
					<view class="wallet_box_center_item_left" @click="gotuFun('/pages/Details/Details?type=7')">
						<view class="wallet_box_center_item_left_" style="margin-right: 38rpx;">
							<image style="width: 90rpx;" src="@/static/wallet/FLBT.png" mode="widthFix">
							</image>
						</view>
						<view class="wallet_box_center_item_left_" style="flex: 1;">
							<p>福利补贴</p>
							<span>{{ res.fuli_bt?res.fuli_bt:'0.00' }}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tab-ber :current='2'></tab-ber>
	</view>
</template>

<script>
	import tabBer from '@/components/appTab/appTab.vue';
	import {
		api_index_my_wallet
	} from '@/api/wallet.js'
	export default {
		components: {
			tabBer
		},
		data() {
			return {
				dlbtn: '',
				appUptext: '',
				updateTypes: false,
				openid: '',
				res: '',
				isOpen1: false,
				isOpen2: false,
				isOpen3: false,
				isOpen4: false,
				isOpen5: false,
				isOpen6: false,
			};
		},
		onShow() {
			uni.hideTabBar();
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_my_walletFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			appgotoFun() {
				// let _this = this;
				// if (process.env.UNI_PLATFORM === 'h5') {
				// 	// 在H5环境中打开
				// 	console.log('在H5环境中打开');
				// 	this.equipment = 'H5';
				// 	window.location.href = 'http://snh5.jibeimall.com/';
				// } else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 	// 在App环境中打开
				// 	console.log('在App环境中打开');
				// 	plus.runtime.launchApplication({
				// 		pname: 'com.app.zyhc',
				// 		action: 'myappzyhc://path/to/page'
				// 	}, function(e) {
				// 		_this.downloads();
				// 		// console.log(e);
				// 	});
				// }
				uni.navigateTo({
					url: '/pages/home/goto/goto'
				})
			},
			gotumoren() {
				if (process.env.UNI_PLATFORM === 'h5') {
					// 在H5环境中打开
					window.location.href = 'http://snh5.jibeimall.com/#/';
				} else if (process.env.UNI_PLATFORM === 'app-plus') {
					// 在App环境中打开
					plus.runtime.openURL('http://snh5.jibeimall.com/#/', function(err) {
						uni.showToast({
							title: JSON.stringify(err),
							duration: 8000
						})
					});
				}
			},

			downloads() {
				if (process.env.UNI_PLATFORM === 'h5') {
					// 在H5环境中打开
					console.log('在H5环境中打开');
					this.showinteraction('请在App端点击下载');
				} else if (process.env.UNI_PLATFORM === 'app-plus') {
					// 在App环境中打开
					console.log('在App环境中打开');
					this.updateTypes = true;
					this.pointerevents = 'none'
					this.link = 'wifi'
					this.dlbtn = '正在下载 0%'
					this.newtext = '正在后台下载，请稍后'
					let _this = this;
					var downToak = plus.downloader.createDownload(
						"http://newappadmin.zhongzihuacai.com/newzyhc.apk", { //拿到下载任务的对象
							filename: '_doc/update/'
						},
						function(d, status) {
							plus.nativeUI.closeWaiting();
							if (status == 200) { //在回调中根据状态 进行操作
								plus.runtime.install(plus.io.convertLocalFileSystemURL(d
									.filename), {}, {}, function(
									error) {
									uni.showToast({
										title: '安装失败',
										mask: false,
										duration: 1500
									});
								})
							} else {
								app.alert("配置出错,请检查网络链接！");
							}
						});
					downToak.start(); // 开启下载的任务
					var prg = 0;
					downToak.addEventListener("statechanged", function(task,
						status) { //给下载任务设置一个监听 并根据状态  做操作
						// console.log(prg)
						switch (task.state) {
							case 1:
								break;
							case 2:
								break;
							case 3:
								prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task
									.totalSize) * 100);
								_this.dlbtn = '正在下载 ' + prg + '%';
								_this.right = 100 - Number(prg) + '%'
								// _this.style_css = 'width:' + prg + '%;';
								if (prg === 100) {
									_this.updateTypes = false;
									_this.dlbtn = '';
								}
								break;
							case 4:
								break;
						}
					});
				}
			},


















			async api_index_my_walletFun() {
				let data = await api_index_my_wallet(this.openid);
				this.res = data;
			},
			gotuFun(url) {
				uni.navigateTo({
					url
				})
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
		}
	}
</script>

<style lang="scss">
	.wallet {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.xzzq_box {
			width: 280rpx;
			height: 80rpx;
			position: fixed;
			top: 150rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 100000;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 80rpx;
			font-size: 28rpx;
		}

		.wallet_box {
			flex: 1;
			width: 100%;
			overflow-y: auto;
			background-color: #fff;

			.wallet_box_top {
				width: 670rpx;
				margin: 20rpx auto;
				height: 320rpx;
				background-image: url('@/static/wallet/walletback.png');
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: top left;
				position: relative;
				display: flex;
				flex-direction: column;
				padding: 0 38rpx;
				margin-top: 60rpx;

				.wallet_box_top_mingxi {
					position: absolute;
					width: 110rpx;
					height: 58rpx;
					background-color: #F5F5F5;
					right: 0;
					top: 30rpx;
					border-top-left-radius: 58rpx;
					border-bottom-left-radius: 58rpx;
					font-size: 28rpx;
					color: #727170;
					line-height: 58rpx;
					text-align: center;
				}

				.wallet_box_top_row {
					width: 100%;
					flex: 1;
					display: flex;
					color: #fff;

					.wallet_box_top_row_col {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						padding: 20rpx 0;
						position: relative;
						font-size: 28rpx;
						padding: 0 20rpx;

						.wallet_box_top_row_col_image {
							width: 165rpx;
							height: 80rpx;
							position: absolute;
							top: -50rpx;
							z-index: 200000000000 !important;
						}

						span {
							font-size: 48rpx;
						}
					}
				}
			}

			.wallet_box_center {
				width: 100%;

				.wallet_box_center_item {
					width: 100%;
					height: 208rpx;
					border-bottom: 15rpx solid #F5F5F5;
					display: flex;
					padding: 0 38rpx;
					align-items: center;
					position: relative;

					.wallet_box_center_item_position {
						position: absolute;
						width: 150rpx;
						height: 45rpx;
						color: #fff;
						text-align: center;
						font-size: 24rpx;
						line-height: 45rpx;
						border-radius: 45rpx;
						background-color: #EC4B5E;
						right: 70rpx;
						bottom: 10rpx;
					}


					.wallet_box_center_item_left {
						display: flex;
						flex: 1;
						align-items: center;
						justify-content: center;
						margin-left: 40rpx;

						.wallet_box_center_item_left_ {
							font-size: 28rpx;
							position: relative;

							.wallet_box_center_item_left_image {
								width: 165rpx;
								height: 80rpx;
								position: absolute;
								top: -70rpx;
								z-index: 200000000000 !important;
								left: 0;
								right: 0;
								margin: 0 auto;
							}

							p {
								margin-bottom: 10rpx;
							}

							span {
								color: #A7A6A6;
							}
						}
					}



					.wallet_box_center_item_right {
						display: flex;
						flex: 1;
						justify-content: center;
						margin-left: 40rpx;

						.wallet_box_center_item_left_ {
							// flex: 1;
							font-size: 28rpx;
							position: relative;

							.wallet_box_center_item_left_image {
								width: 165rpx;
								height: 80rpx;
								position: absolute;
								top: -70rpx;
								z-index: 200000000000 !important;
								left: 0;
								right: 0;
								margin: 0 auto;
							}

							p {
								margin-bottom: 10rpx;
							}

							span {
								color: #A7A6A6;
							}
						}
					}



				}

				.wallet_box_center_item::before {
					content: '';
					width: 2rpx;
					height: 64rpx;
					background-color: #DCDCDC;
					position: absolute;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
			}

		}
	}
</style>